{% extends "base1.html" %}

{% block content %}
<div class="container mt-4">
    <h4 class="mb-4">计划任务管理</h4>
    <textarea id="crontab-list" rows="10" class="form-control mb-3"></textarea>
    <button class="btn btn-primary" onclick="submitCrontab()">新增/修改计划任务</button>

    <div class="accordion mt-4" id="crontabHelp">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    温馨提示：crontab 的基本格式
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#crontabHelp">
                <div class="accordion-body">
                     <h5>格式</h5>
                    
                    <pre>
* * * * *  命令
| | | | |
| | | | +--- 星期（0-6，0表示星期天）
| | | +----- 月（1-12）
| | +------- 日（1-31）
| +--------- 小时（0-23）
+----------- 分钟（0-59）
                    </pre>
                    <ul>
                        <li>每行 crontab 条目由 6 个字段组成：</li>
                        <li>每个字段可以用数字、范围（例如 <code>1-5</code>）、列表（例如 <code>1,3,5</code>）或 <code>*</code>（表示任意值）来定义。</li>
                        <li>后面的“命令”是要执行的脚本或命令。</li>
                    </ul>
                    <h5>示例</h5>
                    <ol>
                        <li>每天凌晨 2:30 执行备份脚本：
                            <pre>30 2 * * * /bin/bash /home/user/backup.sh</pre>
                        </li>
                        <li>每小时的第 0 分钟运行检查程序：
                            <pre>0 * * * * /usr/bin/check_status</pre>
                        </li>
                    </ol>
                    <br><br> <br></br>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    async function fetchCrontab() {
        try {
            const response = await fetch('/api/crontab/list');
            if (!response.ok) {
                throw new Error('后端接口不可用');
            }
            const data = await response.json();
            if (data.crontab) {
                document.getElementById('crontab-list').value = data.crontab.join('\n');
            } else {
                document.getElementById('crontab-list').value = '';
            }
        } catch (error) {
            console.error('Error fetching crontab:', error);
            document.getElementById('crontab-list').value = '# 无法获取计划任务列表\n# 示例：\n* * * * * echo "Hello World"';
        }
    }

    async function submitCrontab() {
        let crontabContent = document.getElementById('crontab-list').value;
        // Ensure content ends with newline
        if (crontabContent && !crontabContent.endsWith('\n')) {
            crontabContent += '\n';
        }
        if (!validateCrontab(crontabContent)) {
            alert('计划任务格式不正确，请检查后再提交');
            return;
        }
        try {
            const response = await fetch('/api/crontab/save', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content: crontabContent })
            });
            const data = await response.json();
            alert(data.message || data.error || '未知错误');
            fetchCrontab();
        } catch (error) {
            console.error('Error saving crontab:', error);
            alert('无法保存计划任务（模拟操作成功）');
        }
    }

    function validateCrontab(content) {
        const lines = content.split('\n');
        const timeBasedRegex = /^((\*|\d+)(\/\d+)?\s+){4}(\*|\d+)(\/\d+)?\s+.+$/;
        const specialStringRegex = /^@(reboot|yearly|annually|monthly|weekly|daily|hourly)\s+.+$/;
        
        for (const line of lines) {
            if (line.trim() === '' || line.startsWith('#')) {
                continue; // Allow empty lines and comments
            }
            if (!timeBasedRegex.test(line) && !specialStringRegex.test(line)) {
                alert(`计划任务格式错误：${line}\n\n正确格式可以是：\n1. 时间格式: * * * * * command\n2. 特殊字符串: @reboot command`);
                return false;
            }
        }
        return true;
    }

    document.addEventListener('DOMContentLoaded', fetchCrontab);
</script>
{% endblock %}
